var tipsUrl = require('../../../../images/experimentManage/data-frame.png')
var tipsDotUrl = require('../../../../images/experimentManage/data-dot.png')
export default{
  getLineChart(xData, yData, echarts) {
    let option = {
      tooltip: {
        // axis类型，才能与showSymbol:false配合呈现效果
        trigger: 'axis',
        axisPointer: {
          // 指示器直线去掉
          type: 'none'
        },
        // show: false,
        // return空，否则会有内容{a/b/c}
        formatter: function(params) {
          /* let res = ''
          let imgUrl = require('../../../../images/experimentManage/data-frame.png')
          params.forEach(item => {
            res = item.value
          })
          return `<div  style="width:80px; height: 50px; background: url(${imgUrl}) no-repeat 100% 100%; text-align: center; line-height: 50px" >${res}</div>` */
          return ``
        }
      },
      title:{
        text: '新增实验统计',
        top: 10,
        left: 15,
        textStyle: {
          color: 'rgba(255, 255, 255, 0.5)'
        }
      },
      grid: {
        // top: '1%',
        left: '3%',
        right: '3%',
        bottom: '6%',
        containLabel: true
      },
      xAxis: [{
        type: 'category',
        // name: '日',
        nameGap: 150,
        boundaryGap: false,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#33393f'
          }
        },
        axisLabel: {
          textStyle: {
            color: 'rgba(255, 255, 255, 0.5)',
            margin: 20
          },
          margin: 10,
          fontSize: '14'
        },
        axisTick: {show: false},
        data: xData
      }],
      yAxis: [{
        type: 'value',
        splitNumber: 5,
        splitLine: {
          show: true,
          lineStyle: {
            color: '#33393f'
          }
        },
        axisLine: {show: false},
        axisLabel: {
          // margin: 15,
          textStyle: {
            color: 'rgba(255, 255, 255, 0.5)'
          },
          fontSize: '14'
        },
        axisTick: {show: false}
      }],
      series: [{
        type: 'line',
        smooth: true,
        symbolSize: 17,
        // 只有在tooltip hover的时候才会出现
        showSymbol: false,
        symbol: `image://${tipsDotUrl}`,
        lineStyle: {
          normal: {
            color: '#4072EE'
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, 
              [
                {offset: 0, color: 'rgba(49,82,247,0.6)'},
                {offset: 1, color: 'rgba(49,82,247,0.0001)'}
              ],
              false),
            shadowColor: 'rgba(49,82,247,0.6)',
            shadowBlur: 10
          }
        },
        label: {
          show: false,
          distance: 1,
          emphasis: {
            show: true,
            offset: [0, -2],
            backgroundColor: {
              image: tipsUrl
            },
            color: '#fff',
            padding: [10, 20, 10, 20],
            height: 30,
            formatter: function(params) {
              return params.data
            },
          },
        },
        data: yData
      }]
    }
    return option
  },
  getPieChart(data) {
    let option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        top: '20%',
        left: '15%',
        icon: 'rect',
        itemHeight: 10,
        itemWidth: 10,
        itemGap: 15,
        textStyle: {
          color: '#11BAF7'
        },
        formatter: function(name) {
          let data = option.series[0].data
          let newname = ''
          data.forEach(item => {
            if (item.name == name) {
              newname = item.value
            }
          })
          return name + '          ' + newname + '%'
        }
      },
      color: ['#BC7345', '#8249EA', '#3557EF', '#DD2876', '#53B8F2'],
      series: [
        {
          type: 'pie',
          radius: ['45%', '60%'],
          center: ['65%', '48%'],
          avoidLabelOverlap: false,
          hoverAnimation: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              // show: true,
              fontSize: '14',

            }
          },
          labelLine:{
            show: false
          },
          data: data
        }
      ]
    }
    return option
  },
  getBarChart(data) {
    let option = {
      tooltip: {
        trigger: 'axis',
        lineStyle: {
          width: 0
        }
      },
      xAxis: {
        type: 'category',
        data: ['APT线索', 'APT溯源', 'APT威胁', 'APT情报发现', 'APT画像'],
        axisLabel: {
          textStyle: {
            color: 'rgba(255, 255, 255, 0.5)',
            margin: 20
          },
          margin: 10,
          fontSize: '14',
          interval: 0
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#33393f'
          }
        },
        axisTick: {show: false}
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          textStyle: {
            color: 'rgba(255, 255, 255, 0.5)',
            margin: 20
          },
          margin: 10,
          fontSize: '14'
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#33393f'
          }
        },
        axisTick: {show: false},
        splitLine: {
          lineStyle: {
            color: '#33393f'
          }
        }
      },
      series: [
        {
          data: data,
          type: 'bar',
          barWidth: 24,
          itemStyle: {
            color: '#53B8F2'
          }
        }
      ]
    }
    return option
  },
  getGraphChart(data, links, coords) {
    let option = {
      xAxis: {
        show: false,
        type: 'value'
      },
      yAxis: {
        show: false,
        type: 'value'
      },
      tooltip: {
        show: false,
      },
      series: [
        {
          type: 'graph',
          zlevel: 5,
          draggable: false,
          coordinateSystem: 'cartesian2d',
          edgeSymbol: ['circle', 'circle'],
          label: {
            normal: {
              show: true,
              color: '#fff', 
              fontSize: 20,
              fontWeight: 'bold',            
            },
          },
          data: data,
          links: links,
          lineStyle: {
            normal: {
              opacity: 1,
              color: '#fff',
              curveness: 0.2,
              width: 1
            }
          }
        },
        {
          type: 'lines',
          coordinateSystem: 'cartesian2d',
          z: 1,
          zlevel: 2,
          animation: false,
          /* effect: {
            show: true,
            period: 5,
            trailLength: 0.02,
            symbolSize: 13,
            symbol: 'pin',
            loop: true,
            color: 'rgba(55,155,255)'
          }, */
          lineStyle: {
            normal: {
              color: '#22AC38',
              width: 0,
              curveness: 0.2
            }
          },
          data: coords
        }
      ]
    }
    return option
  }
}